<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link rel="stylesheet" type="text/css" href="/libs/easyui/easyui.css">

    <link rel="stylesheet" type="text/css" href="/libs/bootstrap/css/bootstrap.min.css">
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/layui/css/layui.css"
          rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" type="text/css"
          href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/admin/product/libs/font-awesome/css/font-awesome.min.css">
    <link rel=stylesheet href="/css/style.css" type="text/css">
    <script type=text/javascript src="/js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="/libs/easyui/easyui.js"></script>
    <style>
        /*修改layui原生样式*/
        .layui-table-tips-main {
            display: none
        }

        .layui-table-tips-c {
            display: none
        }

        .layui-table-cell {
            font-weight: 400;
        }

    </style>
</head>
<div class="page-header">
    <div class="page-header-top">
        <div class="container">
            <!-- LOGO -->
            <div class="page-logo">
                <a href="/">
                    <img src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/productDesk/image/logo.png"
                         alt="logo" class="pinza-logo">
                </a>
            </div>
            <!--菜单-->
            <div class="top-menu">
                <ul class="nav pull-right">
                    <!--个人中心-->
                    <li class="dropdown dropdown-extended dropdown-dark dropdown-inbox" id="header_inbox_bar">
                        欢迎您：${userName}
                    </li>
                    <li class="dropdown dropdown-extended dropdown-dark dropdown-inbox" id="header_inbox_bar">
                        <a href="http://pinzabim.oss-cn-shanghai.aliyuncs.com/Optional/home.html"
                           target="_blank">选装体验</a>
                    </li>
                    <li class="dropdown dropdown-user dropdown-dark">
                        <a href="/index.page" target="_blank">
                            <span class="username username-hide-mobile">客户中心</span>
                        </a>
                    </li>
                    <li class="dropdown dropdown-user dropdown-dark">
                        <a href="/shopping/shopcar.page?user_id=${user_id!''}">
                            <span class="username username-hide-mobile">购物车</span>
                        </a>
                    </li>
                    <li class="dropdown dropdown-user dropdown-dark">
                        <a href="/logout">
                            <span class="username username-hide-mobile">退出</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

</div>

<!-- 登录模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    作废确认
                </h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info">确认
                </button>
                <button type="button" id="close" class="btn default">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>
<!--弹窗结束-->


<div class="easyui-layout">
    <div region="west" split="true" style="width:22%;">
        <div class="content-left" style="height: 100%">
            <p style="padding:5px;margin:0;"></p>
            <ul class="easyui-tree" id="tt">
            </ul>
        </div>

    </div>
    <div id="content" region="center" style="padding:5px;">
        <div class="main-container">
            <div class="mid">
                <span>SPU信息</span>
            </div>
            <div class="boxs">
                <div id="spu_msg">

                </div>
                <div class="clearfix"></div>

            </div>
            <div class="mid-t">
                <span>SKU信息</span>
                <span class="fr mid-t-shop" data-type="getCheckData"><i class="fa fa-shopping-basket"></i>添加购物</span>
            </div>
            <div class="clearfix"></div>

            <div class="box-table">
                <!--<table class="" id="dg"></table>-->
                <table class="layui-hide" id="LAY_table_user" lay-filter="user" lay-data="{id:'idTest'}"></table>

            </div>
        </div>


    </div>
</div>


</body>
</html>
<script src="/js/jquery.nicescroll.js"></script>

<!--滚动条脚本-->
<script>
    $('.content-left').niceScroll({
        cursorcolor: "#ccc",//#CC0071 光标颜色
        cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
        touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
        cursorwidth: "5px", //像素光标的宽度
        cursorborder: "0", // 游标边框css定义
        cursorborderradius: "5px",//以像素为光标边界半径
        autohidemode: true //是否隐藏滚动条
    });
</script>

<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/layui/layui.js"
        type="text/javascript"></script>
<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="xuan" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="user" {{ d.id==
           10001 ? 'checked' : '' }}>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="usernameTpl">
    <a href="javascript:;" class="layui-table-link">{{ d.sku_name }}</a>
</script>


<script>
    var user_id = "${user_id!''}";
    layui.use('table', function () {
        var table = layui.table;

        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            , url: '/shopping/sku.json?user_id=' + user_id
            , cols: [
                [ //表头
                    {field: 'sku_id', type: 'checkbox'}
                    , {field: 'sku_name', title: '材料名称', width: 400, event: 'setSign', templet: '#usernameTpl'}
                    , {field: 'sku_code', title: '材料编码', width: 260}
                    , {field: 'sku_unit', title: '单位', width: 260}
                    , {field: 'sku_brand', title: '品牌', width: 260}
                    , {field: 'sku_model', title: '型号', width: 260}
                    , {field: 'sku_slug_set', title: '规格参数', width: 260}
                    , {field: 'sku_contract_price', title: '价格', width: 260}
                    , {field: 'sku_remark', title: '说明', width: 80}
                ]
            ]
            , id: 'testReload'
            , page: true
            , height: 'full-310'
            , limits: [100, 500, 1000]
            , limit: 100 //每页默认显示的数量

        });
        window.reload_table = function (param) {
            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    id: param
                }
            });
        };
        //监听表格复选框选择
        table.on('checkbox(user)', function (obj) {
            console.log(obj)
        });


        //监听工具条
        table.on('tool(user)', function (obj) {
            var data = obj.data;
            layer.open({
                type: 2,
                content: './box.html',
                title: "产品详情",
                // closeBtn: 0,
                area: ['50%', '80%'],
                shadeClose: true

            });
        });


        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#testReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        id: demoReload.val()
                    }
                });
            },

            getCheckData: function () { //获取选中数据
                var checkStatus = table.checkStatus('testReload')
                        , data = checkStatus.data;
                if (checkStatus.data.length > 0) {
                    $.ajax({
                        url: '/shopping/add.json',
                        type: 'post',
                        data: {order: JSON.stringify(data), user_id: user_id},
                        dataType: 'json',
                        success: function (result) {
                            if (result.ret) {
                                layer.alert("添加成功！");
                            } else {
                                layer.alert(result.msg);
                            }
                        }
                    });
                } else {
                    layer.alert("您还没有选择商品哦！");
                }

            }
        };


        $('.mid-t .mid-t-shop').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //初始化左边树行菜单
        $('#tt').tree({
            url: "/shopping/tree.json?user_id=" + user_id,
            method: 'get',
            loadFilter: function (data) {
                if (data.ret) {
                    return data.data;
                } else {
                    return data.data;
                }
            },
            onClick: function (node) {
                getSpu(node.id);
            }
        });
        //初始化spu列表
        getSpu(null);

        function innerHtml(data) {
            $("#spu_msg").empty();
            var html = "";
            for (var i = 0; i < data.length; i++) {
                html += "<div class='box box-goods fl'><a onclick=\"reload_table('" + data[i].spu_id + "')\" >" +
                        "<div class='box-main'>" +
                        "<div class='preview-wp'>" +
                        "<div class=\"preview-img\" style=\"background-image: url(" + data[i].spu_pic_url + ")\"></div>" +
                        // "<div class=\"preview-img\" style=\"background-image: url('http://pinzafile.oss-cn-shanghai.aliyuncs.com/management/pic/20180912164425330/524d26bc2276c1350eb1234fcede334b.jpg')\"></div>" +

                        // "<img src=\"" + data[i].sku_file_paht + "\" class='preview'>" +
                        "</div>" +
                        "</div>" +
                        "<div class='box-bottom'>" +
                        "<p class='box-title ell'>" + data[i].spu_name + "</p>" +
                        "</div>" +
                        "</a></div>";
            }
            // reload_table();
            if (data.length > 0) {
                $("#spu_msg").append(html);
            }

            // initActive();
        }

        function getSpu(id) {
            $.ajax({
                url: '/shopping/spu.json',
                type: 'get',
                data: {id: id, user_id: user_id},
                dataType: 'json',
                success: function (result) {
                    if (result.ret) {
                        innerHtml(result.data);
                    } else {
                        alert(result.msg);
                    }
                }
            });

        }
    });

</script>


<script src="/js/active.js" type="text/javascript"></script>
<script src="/libs/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script>

    $(document).ready(function () {
        // 新增空间
        $("#newSpace").click(function () {
            $('#myModalspace').modal('show');
        })
        // 登录
        $("#login").click(function () {
            $('#myModal').modal('show');

        });
        $("#close").click(function () {
            $('#myModal').modal('hide');

        })
    });

    // 模态窗口垂直居中
    function centerModals() {
        $('#myModal,#myModalspace').each(function (i) {
            var $clone = $(this).clone().css('display', 'block').appendTo('body');
            var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
            top = top > 0 ? top : 0;
            $clone.remove();
            $(this).find('.modal-content').css("margin-top", top);
        });

    };


    $('#myModal,#myModalspace').on('show.bs.modal', centerModals);
    //页面大小变化是仍然保证模态框水平垂直居中
    $(window).on('resize', centerModals);
</script>